import React, {Component} from 'react';
import './style.css'

class NavBar extends Component {
  constructor(props) {
    //在props中有一个属性叫做children[], 其中就包含当前组件(元素)的子组件
    //使用children传递组件的缺点：children可能是一个元素,也可能是一个元素数组, 不易控制
    //如果使用数组接收children, 需要记住传入元素的索引, 容易出错
    super(props);
  }

  render() {
    const { children } = this.props
    return (
        // 方式1：使用children实现插槽
        <div className='nav-bar'>
          <div className="left">{children[0]}</div>
          <div className="center">{children[1]}</div>
          <div className="right">{children[2]}</div>
        </div>
    );
  }
}

export default NavBar;